﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Energy Monitor - Ken Hughes</title>
    <script src="scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <link rel="Stylesheet" href="css/style.css" type="text/css" />
</head>
<body>

    <div class="content">
        <g:background id="background" src="black_back_8.png" style="width:130;height:113;"/>
        <div class="heading">
        Home Energy Monitor
        </div>
        
        <div class="monitor">
            <div class="energy">
                <div class="elabel">Energy Now</div>
                <div class="evalue" id="energyval">8888</div>
                <div class="elabel">Watts</div>
            </div>
            <div class="h_sep"></div>
            <div class="temp">
                <div class="value" id="tempval">88.8</div>
                <div class="label">TEMP</div>
            </div>
            <div class="time">
                <div class="value" id="timeval">88:88:88</div>
                <div class="label">TIME</div>
            </div>
        </div>

    </div>

    <script type="text/javascript">

        function getReading(fname, elementid) {
            ajaxUrl = "EnergyMonWs.svc/json/" + fname;
            $.ajax({
                type: "GET",
                url: ajaxUrl,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    // Replace the div's content with the page method's return.
                    $("#" + elementid).text(msg);
                }
            });
        }


        function updateReadings() {

            getReading("temp", "tempval");
            getReading("energy", "energyval");
            getReading("time", "timeval");
           
        }

        $(document).ready(function () {

            updateReadings();
            window.setInterval(function () {
                updateReadings();
            }, 15000);
        });
    
    </script>

</body>
</html>
